<template>
    <div>
        <!-- <img src="../../public/16gl-4.png" alt=""> -->
        <!-- 404图片动画效果 -->
        <div class="imgerror">
            <img src="../assets/16gl-4.png" alt="" id="foure_1">
            <img src="../assets/16gl-0.png" alt="" id="foure_2">
            <img src="../assets/16gl-4.png" alt="" id="foure_1">
        </div>
        <!-- 文字内容 -->
        <div class="texterror">
            <span style="margin-bottom: 5px;">对不起!</span>
        <br>
        <span>亲,当前界面还在开发中</span>
        </div>
        
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.imgerror{
    display: flex;
    //  display: inline-block;
   justify-content: center;
  

    img{
        line-height: 30px;
        width: 20vw;
        height: 20vw;
        margin-top:10vw ;
    }
   #foure_1{
     animation: moveimg_1 2s linear infinite;
   }
   #foure_2{
      animation: moveimg_2 2s linear infinite;
   }
    @keyframes moveimg_1 {
        0%{transform: translateY(0);}
        50%{transform: translateY(20px);}
        100%{transform: translateY(0);}
    }
    @keyframes moveimg_2 {
        0%{transform: translateY(0);}
        50%{transform: translateY(-20px);}
        100%{transform: translateY(0);}
    }
   
}
.texterror{
    margin-top: 10vw;
    font-size: 20px;
    text-align: center;
    
}
</style>